---
import { getCollection } from "astro:content";

// 获取并过滤博客条目的函数
async function getPublishedBlogEntries() {
  try {
    const allBlogEntries = await getCollection("blog");
    
    // 过滤出 'draft: false' 且发布日期早于当前日期的博客条目
    const publishedEntries = allBlogEntries.filter(({ data }) => {
      return !data.draft && data.publishDate && data.publishDate < new Date();
    });

    // 按发布日期对内容条目进行排序（最新的在前）
    return publishedEntries.sort((a, b) => {
      return b.data.publishDate.valueOf() - a.data.publishDate.valueOf();
    });
  } catch (error) {
    console.error("获取博客条目时出错:", error);
    return [];
  }
}

// 格式化日期的函数
function formatDate(date) {
  if (!date) return "未知日期";
  
  try {
    return new Intl.DateTimeFormat('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    }).format(date);
  } catch (error) {
    return date.toDateString();
  }
}

// 生成摘要的函数
function generateSnippet(entry) {
  if (entry.data.snippet) {
    return entry.data.snippet.length > 120 
      ? entry.data.snippet.slice(0, 120) + "..." 
      : entry.data.snippet;
  }
  return "点击阅读更多精彩内容...";
}

// 获取博客条目
const publishedBlogEntries = await getPublishedBlogEntries();
const displayEntries = publishedBlogEntries.slice(0, 3);
---

<style>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* 确保卡片高度一致 */
  .blog-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  /* 平滑的悬停动画 */
  .blog-card:hover {
    transform: translateY(-2px);
  }
  
  /* 渐变背景动画 */
  .gradient-bg {
    background: linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, #1e40af 100%);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
  }
  
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
</style>

<section class="pt-20 pb-10 lg:pt-[120px] lg:pb-20 bg-white dark:bg-dark">
  <div class="container">
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full px-4">
        <div class="mx-auto mb-[60px] max-w-[485px] text-center">
          <span class="block mb-2 text-lg font-semibold text-primary">
            我们的博客
          </span>
          <h2 class="mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]">
            我们的最新动态
          </h2>
          <p class="text-base text-body-color dark:text-dark-6">
            获取最新的新闻动态，与社区保持最新联系。
          </p>
        </div>
      </div>
    </div>

    {displayEntries.length > 0 ? (
      <ul class="-mx-4 flex flex-wrap">
        {
          displayEntries.map((blogPostEntry, index) => (
            <li class="w-full px-4 md:w-1/2 lg:w-1/3 mb-8">
              <article class="wow fadeInUp group block h-full" data-wow-delay={`.${index + 1}s`}>
                <a href={`/blog/${blogPostEntry.slug}`} class="block h-full">
                  <div class="bg-white dark:bg-dark-2 rounded-lg shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden h-full flex flex-col">
                    {/* 图片容器 */}
                    <div class="relative h-48 overflow-hidden bg-gradient-to-br from-primary/10 to-blue-600/10">
                      <div class="absolute inset-0 flex items-center justify-center">
                        <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center">
                          <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                          </svg>
                        </div>
                      </div>
                      {/* 悬停效果 */}
                      <div class="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    </div>
                    
                    {/* 内容区域 */}
                    <div class="p-6 flex-1 flex flex-col">
                      {/* 日期标签 */}
                      <div class="mb-4">
                        <span class="inline-flex items-center px-3 py-1 text-xs font-medium text-white bg-primary rounded-full">
                          <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                          </svg>
                          {formatDate(blogPostEntry.data.publishDate)}
                        </span>
                      </div>
                      
                      {/* 标题 */}
                      <h3 class="mb-3 flex-shrink-0">
                        <span class="text-lg font-semibold text-dark dark:text-white group-hover:text-primary dark:group-hover:text-primary transition-colors duration-300 line-clamp-2 sm:text-xl lg:text-lg xl:text-xl">
                          {blogPostEntry.data.title || "无标题"}
                        </span>
                      </h3>
                      
                      {/* 作者信息 */}
                      {blogPostEntry.data.author && (
                        <div class="mb-3 flex items-center text-sm text-body-color dark:text-dark-6">
                          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                          </svg>
                          {blogPostEntry.data.author}
                        </div>
                      )}
                      
                      {/* 摘要 */}
                      <p class="text-sm text-body-color dark:text-dark-6 flex-1 line-clamp-3">
                        {generateSnippet(blogPostEntry)}
                      </p>
                      
                      {/* 阅读更多链接 */}
                      <div class="mt-4 pt-4 border-t border-gray-100 dark:border-dark-3">
                        <span class="inline-flex items-center text-sm font-medium text-primary group-hover:text-primary/80 transition-colors duration-300">
                          阅读全文
                          <svg class="w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                          </svg>
                        </span>
                      </div>
                    </div>
                  </div>
                </a>
              </article>
            </li>
          ))
        }
      </ul>
    ) : (
      <div class="text-center py-12">
        <div class="w-24 h-24 mx-auto mb-6 bg-gray-100 dark:bg-dark-3 rounded-full flex items-center justify-center">
          <svg class="w-12 h-12 text-gray-400 dark:text-dark-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-dark dark:text-white mb-2">暂无博客文章</h3>
        <p class="text-body-color dark:text-dark-6">我们正在努力创作更多精彩内容，敬请期待！</p>
      </div>
    )}
    
    {/* 查看更多按钮 */}
    {publishedBlogEntries.length > 3 && (
      <div class="text-center mt-12">
        <a 
          href="/blog" 
          class="inline-flex items-center px-8 py-3 text-base font-medium text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors duration-300 shadow-lg hover:shadow-xl"
        >
          查看更多文章
          <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
    )}
  </div>
</section>